<!doctype html>

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>系统A-首页</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.min.js"></script>
</head>
<body>
<div id="systemA">
    <h1>系统A</h1>
    <div v-if="userIsLogin != true">
        欢迎陌生人，请<a>登录</a>!
    </div>
    <div v-if="userIsLogin == true">
        欢迎<span style="color: green;">{{userInfo.username}}</span>登录系统!
        <br/>
        <button @click="logout">点我退出登录</button>
    </div>
</div>
<script type="text/javascript " src="/static/js/app.js"></script>
<script type="text/javascript">
    var index = new Vue({
        el: "#systemA",
        data: {
            userIsLogin: false,
            userInfo: {},
        },
        created() {
            var me = this;
            // 通过cookie判断用户是否登录
            this.judgeUserLoginStatus();

            // 判断用户是否登录
            var userIsLogin = this.userIsLogin;
            if (!userIsLogin) {
                // 如果没有登录，判断一下是否存在tmpTicket临时票据
                var tmpTicket = app.getUrlParam("tmpTicket");
                console.log("tmpTicket: " + tmpTicket);
                if (tmpTicket != null && tmpTicket != "" && tmpTicket != undefined) {
                    // 如果有tmpTicket临时票据，就携带临时票据发起请求到cas验证获取用户会话
                    axios.defaults.withCredentials = true;
                    axios.post('http://127.0.0.1:8080/verifyTmpTicket?tmpTicket=' + tmpTicket)
                        .then(res => {
                            if (res.data.status == 200) {
                                var userInfo = res.data.data;
                                console.log(res.data.data);
                                this.userInfo = userInfo;
                                this.userIsLogin = true;
                                app.setCookie("user",  JSON.stringify(userInfo));
                                window.location.href = "http://127.0.0.1:8888/home";
                            } else {
                                alert(res.data.msg);
                                console.log(res.data.msg);
                            }
                        });
                } else {
                    // 如果没有tmpTicket临时票据，说明用户从没登录过，那么就可以跳转至cas做统一登录认证了
                    window.location.href = app.SSOServerUrl + "/login?redirectUrl=http://127.0.0.1:8888/index";
                }

                console.log(app.SSOServerUrl + "/login?redirectUrl=" + window.location);
            }
        },
        methods: {
            logout() {
                var userId = this.userInfo.id;
                axios.defaults.withCredentials = true;
                axios.post('http://127.0.0.1:8080/logout?userId=' + userId)
                    .then(res => {
                        if (res.data.status == 200) {
                            var userInfo = res.data.data;
                            console.log(res.data.data);
                            this.userInfo = {};
                            this.userIsLogin = false;
                            app.deleteCookie("user");

                            alert("退出成功!");
                        } else {
                            alert(res.data.msg);
                            console.log(res.data.msg);
                        }
                    });
            },
            // 通过cookie判断用户是否登录
            judgeUserLoginStatus() {
                var userCookie = app.getCookie("user");
                if (
                    userCookie != null &&
                    userCookie != undefined &&
                    userCookie != ""
                ) {
                    var userInfoStr = decodeURIComponent(userCookie);
                    // console.log(userInfo);
                    if (
                        userInfoStr != null &&
                        userInfoStr != undefined &&
                        userInfoStr != ""
                    ) {
                        var userInfo = JSON.parse(userInfoStr);
                        // 判断是否是一个对象
                        if ( typeof(userInfo)  == "object" ) {
                            this.userIsLogin = true;
                            // console.log(userInfo);
                            this.userInfo = userInfo;
                        } else {
                            this.userIsLogin = false;
                            this.userInfo = {};
                        }
                    }
                } else {
                    this.userIsLogin = false;
                    this.userInfo = {};
                }
            }
        }
    });
</script>
</body>

</html>